﻿@page "/notifications"

<h3>@Localizer["Title"]</h3>

<DemoBlock Title="@Localizer["BaseUsageText"]" Introduction="@Localizer["IntroText1"]" Name="Normal">
    <p>@Localizer["IntroText2"]</p>
    <Tips>
        <p>@Localizer["IntroText3"]</p>
    </Tips>
    <div class="mb-3">
        <p>@((MarkupString)Localizer["BasicUsageTips"].Value)</p>
        <Pre>private NotificationItem Model { get; set; } = new NotificationItem();

private async Task Dispatch()
{
    Interop ??= new JSInterop&lt;Notifications&gt;(JSRuntime);
    await BrowserNotification.Dispatch(Interop, this, Model, nameof(ShowNotificationCallback));
}

[JSInvokable]
public void ShowNotificationCallback(bool result)
{
    // callback
    StateHasChanged();
}</Pre>
    </div>
    <div class="form-inline row g-3">
        <div class="col-12">
            <Checkbox ShowLabel="true" DisplayText="@Localizer["PermissionText"]" @bind-Value="@Permission" IsDisabled="true"></Checkbox>
        </div>
        <div class="col-12">
            <BootstrapInput ShowLabel="true" DisplayText="@Localizer["TitleText"]" @bind-Value="@Model.Title"></BootstrapInput>
        </div>
        <div class="col-12 ">
            <BootstrapInput ShowLabel="true" DisplayText="@Localizer["MessageText"]" @bind-Value="@Model.Message"></BootstrapInput>
        </div>
        <div class="col-12">
            <Checkbox ShowLabel="true" DisplayText="@Localizer["SilentText"]" @bind-Value="@Model.Silent"></Checkbox>
        </div>
        <div class="col-12">
            <Button Text="@Localizer["CheckPermissionText"]" OnClick="CheckPermission" Color="Color.Secondary"></Button>
            <Button Text="@Localizer["NotificationButtonText"]" OnClick="Dispatch"></Button>
        </div>
    </div>
    <BlockLogger @ref="Trace" class="mt-3" />
</DemoBlock>

<AttributeTable Items="GetNotificationItem()" Title="NotificationItem" />
